<template>
    <div class="scroll" :style="`height:${height};`">
        <slot></slot>
        <div class="bottom" v-if="bottom_show">
            {{ bottom_text }}
        </div>
    </div>
</template>
<script>
    export default {
        name: 'scroll-view',
        props: {
            // 高度
            height: {
                type: String,
                default: () => {
                    return '100vh'
                }
            },
            // 触底之后显示的内容
            bottom_text:{
                type: String,
                default: () => {
                    return ''
                }
            },
            // 是否显示触底的内容
            bottom_show: {
                type: Boolean,
                default: ()=>{
                    return false
                }
            }
        },
        data(){
            return {
                newTop: 0,
                offsetHeight: 0,
                scrollHeight: 0
            }
        },
        mounted(){
            let scroll = document.querySelector('.scroll');
            scroll.addEventListener('scroll',this.scroll)
        },
        watch: {
            newTop(n,o){
                if(Math.floor(this.offsetHeight + this.newTop) == Math.floor(this.scrollHeight) && n > o){
                    this.$emit('onBashBottom','触底了')
                }
            },
            bottom_show(n){
                if(n == true){
                    setTimeout(function (){
                        document.querySelector('.scroll').scrollTop = document.querySelector('.scroll').scrollTop+39;
                    })
                }
            }
        },
        methods: {
            scroll(event){
                let target = event.target || event.srcElement;
                this.offsetHeight = target.offsetHeight;
                this.scrollHeight = target.scrollHeight;
                this.newTop = target.scrollTop;
            }
        }
    }
</script>
<style lang="scss" scoped>
.scroll{
    overflow-y: scroll;
    transition: all 0.2s;
    .bottom{
        width: 100%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        color: #999;
    }
}
</style>